<template>
  <div class="box">
    <ul class="left">
      <li
        v-for="(item, index) in items"
        :key="item.id"
        @click="selectFn(index)"
      >
        <div class="img"><img :src="item.icon" alt="" /></div>
        {{ item.name }}
        <div class="count">
          <van-tag plain type="primary" size="large" round>
            {{ item.count }}
          </van-tag>
        </div>
      </li>
    </ul>
    <ul class="right">
      <li v-for="item in smalltype" :key="item.id" @click="newslist(item.id)">
        {{ item.name }}
        <div class="count">
          <van-tag plain type="primary" size="large" round>
            {{ item.count }}
          </van-tag>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["items", "sub_categories"],
  data() {
    return {
      bigtype: [],
      smalltype: [],
    };
  },
  methods: {
    selectFn(index) {
      this.smalltype = this.sub_categories[index];
      // console.log(36, this.smalltype);
    },
    newslist(id) {
      this.$emit("selectFn", id);
    },
  },
  created() {
    this.smalltype = this.sub_categories[0];
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  width: 100%;
  height: 300px;
  .left {
    width: 40%;
    overflow: auto;
    padding-left: 10px;
    li {
      margin-top: 10px;
      font-size: 25px;
      .img {
        display: inline-block;
        width: 30px;
        img {
          width: 100%;
        }
      }
      .count {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
  .right {
    width: 60%;
    overflow: auto;
    padding-left: 10px;

    li {
      margin-top: 10px;
      font-size: 25px;
      .count {
        float: right;
        margin-right: 50px;
      }
    }
  }
}
</style>